<template>
  <div class="my-card" id="my-card">
    <div class="card-container">
      <img class="title-img" src="../assets/itemImg.jpg" />
      <div class="item-container">
        <p class="item-label">
          <span>最新上新</span>
          <span>博主推荐</span>
        </p>
        <p class="item-container-title">{{title}}</p>
      </div>
      <div class="item-data">
        <div class="item-data-div">
          <img class="data-img" src="../assets/icon/eye2.png" />
          <span>{{lookNum}}</span>
        </div>
        <div class="item-data-div gold-right">
          <img class="data-img" src="../assets/icon/gold.png" />
          <span>15</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "创意矢量电商网站封面素材，网页模板素材",
      lookNum: 15,
    };
  },
};
</script>
<style scoped>
.gold-right {
  padding-left: 30%;
}
.item-data-div {
  width: 50%;
  display: flex;
  align-items: center;
  color: #777;
}
.item-data-div {
  display: flex;
  align-items: center;
  color: #777;
}
.item-data {
  display: block;
  border-top: 1px solid #eee;
  width: 100%;
  min-width: 100%;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 13px 0;
  clear: both;
  display: flex;
}
.data-img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.item-container-title {
  color: #34495e;
  font-weight: bold;
  font-size: 15px;
}
.item-container {
  width: 90%;
  margin: 0 auto;
}
.item-label {
  margin-top: 8px;
  margin-bottom: 8px;
}
.item-label span {
  color: #888;
  font-size: 12px;
  margin-right: 5px;
}
.title-img {
  width: 100%;
  height: 170px;
}
.my-card {
  padding: 10px;
  width: 25%;
  min-width: 250px;
}
.card-container{
  height: 320px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: hidden;
  border: 1px solid #eee;
  padding-bottom: 20px;
  width: 96%;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 20px;
}
.card-container:hover {
  margin-top: 19px;
  box-shadow: 2px 2px 5px #aaa;
}
</style>
